<template>
	<div class="header">
		<div class="logo">
			<img src="../assets/logo.png" />
		</div>
		<div class="det">
			<div class="search_icon">
				<svg class="index__icon__src-commonComponent-topArea-" aria-hidden="true">
					<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-sousuo"></use>
				</svg>
			</div>
			<router-link class="user_icon" to="/space">

			</router-link>
			<div class="load">
				<p>下载APP</p>
			</div>
		</div>
	</div>
</template>

<script>
</script>

<style lang="scss">
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 34.5px;
		overflow: hidden;
		flex-direction: row;
    	position: fixed;
	    z-index: 7;
    	top: 0;
    	padding: 22.5px 0;
    	background: #fff;
    	padding-left: 7%;
		.logo{
			width: 62px;
			img{
				    position: relative;
				    display: block;
				    width: 100%;
				    margin: auto;
				    color: transparent;
			}
		}
		.det{
			display: flex;
			align-items: center;
			justify-content: space-around;
			.search_icon{
				display: block;
				width: 17.5px;
				height: 17.5px;
				margin-right:12px;
				color: hsla(0,0%,100%,0);
				svg{
					    display: block;
					    width: 100%;
					    height: 100%;
					    fill: #aaa;
				}
			}
			.user_icon{
			    display: block;
			    width: 20px;
			    height: 20px;
			    margin-right: 10px;
			    border-radius: 50%;
			    background: url(../assets/noface.gif) no-repeat;
			    background-size: 100% 100%;
			    overflow: hidden;
			}
			.load{
				    display: block;
				    margin-right: 12px;
				    width: 80px;
				    height: 24px;
				    border: 1px solid #fb7299;
				    border-radius: 8px;
				    background-color: #fb7299;
				    p{
				    	    font-size: 14px;
						    line-height: 24px;
						    text-align: center;
						    color: #fff;
				    }
			}
		}
	}
</style>